<template>
	<view class="login">
		<view class="topBox">
			<image class="topimg" src="../../static/image/logintop.png" mode="" />
			<view class="contentBox">
				<view class="navBar">
					<u-icon name="arrow-left" color="#ffffff"></u-icon>
					<view class="" @click="handleLogintype">
						<view v-if="!loginType" class="">
							密码登录
						</view>
						<view v-else class="">
							验证码登录
						</view>
					</view>
				</view>
				<view class="title">
					登录
				</view>
			</view>
		</view>

		<view class="logintype">

			<view v-if="loginType" class="">
				密码登录
			</view>
			<view v-else class="">
				验证码登录
			</view>

		</view>

		<view class="inputContent">

			<view class="inputbox">
				<image src="../../static/image/phone.png" mode=""
					style="width: 44rpx;height: 50rpx;margin-right: 70rpx;" />
				<input type="number" v-model="username" name="" id="" placeholder="请输入您的电话">
			</view>

			<view v-if="!loginType" class="inputbox">
				<image src="../../static/image/yzm.png" mode=""
					style="width: 44rpx;height: 50rpx;margin-right: 70rpx;" />
				<input type="number" v-model="code" name="" id="" placeholder="请输入验证码">
				<view v-if="codeFlag" class="yamtext" @click="handleSendcode">
					发送验证码
				</view>
				<view v-else class="yamnum">
					{{time}}s
				</view>
			</view>

			<view v-else class="inputbox">
				<image src="../../static/image/password.png" mode=""
					style="width: 40rpx;height: 46rpx;margin-right: 70rpx;" />
				<input type="password" v-model="password" name="" id="" placeholder="请输入密码">
			</view>
		</view>

		<view class="btnsBox">
			<view class="btn btns" @click="$u.debounce(handleLogin, 1000)">
				<view class="inner">
					<view class="" style="margin-right: 40rpx;">
						登录
					</view>
					<u-icon name="arrow-rightward" size="20" color="#ffffff"></u-icon>
				</view>
			</view>


			<view class="btn " @click="handleRegister">
				<view class="inner">
					<view class="" style="margin-right: 40rpx;">
						注册
					</view>
					<u-icon name="arrow-rightward" size="20" color="#359691"></u-icon>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	import {
		sendsms,
		login
	} from "@/api/api.js"
	export default {
		data() {
			return {
				username: "", //手机号
				code: "", //验证码
				password: "", //密码
				loginType: true, //true验证码登录，false密码登录
				codeFlag: true,
				time: 60,
				setInterval: null
			}
		},
		created() {},
		onLoad() {},

		methods: {
			async handleSendcode() {
				const that = this
				if (that.username == "") {
					uni.showToast({
						title: '请输入手机号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				let res = await sendsms({
					username: that.username
				})
				console.log("验证码", res)
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
					// uni.showToast({
					// 	title: '验证码' + res.data,
					// 	icon: "none",
					// 	duration: 5000
					// });
					that.codeFlag = false
					const interval = setInterval(function() {
						if ((that.time--) <= 0) {
							that.time = 60
							that.codeFlag = true
							clearInterval(interval)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

			},



			async handleLogin() {
				let data = {}
				if (!this.loginType) {
					if (this.code == "") {
						uni.showToast({
							title: "请填写验证码",
							icon: "none",
							duration: 2000
						});
						return
					}
					data = {
						username: this.username,
						code: this.code
					}
				} else {
					if (this.password == "") {
						uni.showToast({
							title: "请填写密码",
							icon: "none",
							duration: 2000
						});
						return
					}
					data = {
						username: this.username,
						password: this.password
					}
				}
				let res = await login(data)
				if (res.code == 1000) {
					uni.showToast({
						title: "登录成功",
						icon: "none",
						duration: 1500
					});
					uni.setStorageSync("token", res.data.token)
					uni.setStorageSync("userData", res.data)
					setTimeout(() => {
						uni.reLaunch({
							url: "../home/index"
						})
					}, 2000)

				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

			},

			handleRegister() {
				uni.navigateTo({
					url: "./register"
				})
			},

			handleLogintype() {
				console.log("999999")
				this.loginType = !this.loginType
				this.$forceUpdate()
			},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		.topBox {
			width: 100%;
			height: 358rpx;
			position: relative;

			.topimg {
				width: 100%;
				height: 100%;
			}

			.contentBox {
				width: 100%;
				height: 100rpx;
				position: absolute;
				top: 120rpx;

				.navBar {
					display: flex;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					padding: 0 30rpx;
					display: flex;
					align-content: center;
					justify-content: space-between;
				}

				.title {
					width: 100%;
					text-align: center;
					font-size: 80rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}


		.logintype {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
			margin-top: 34rpx;
			margin-left: 30rpx;
		}

		.inputContent {
			margin-top: 28rpx;

			.inputbox {
				width: 690rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				display: flex;
				align-items: center;
				padding: 24rpx 78rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-bottom: 34rpx;

				.yamtext {
					width: 112rpx;
					height: 32rpx;
					background: #359691;
					border-radius: 212rpx 212rpx 212rpx 212rpx;
					opacity: 1;
					font-size: 16rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 32rpx;
					text-align: center;
				}

				.yamnum {
					color: #359691;
				}

			}
		}

		.btnsBox {
			margin-top: 198rpx;

			.btn {
				width: 622rpx;
				height: 76rpx;
				border-radius: 356rpx 356rpx 356rpx 356rpx;
				opacity: 1;
				border: 2rpx solid #359691;
				margin: 0 auto;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #359691;
				line-height: 76rpx;
				text-align: center;
				display: flex;

				.inner {
					width: 224rpx;
					display: flex;
					margin: 0 auto;
					justify-content: space-evenly;
				}
			}

			.btns {
				background: #359691;
				color: #ffffff;
				margin-bottom: 36rpx;
			}
		}
	}
</style>